<template>
  <div class="detail-params" v-if="params.info">
    <div class="table-params-title">{{params.info.key}}</div>
    <table class="table-params">      
      <tr v-for="item in params.info.set" :key="item.index">
        <td>{{item.key}}</td>
        <td>{{item.value}}</td>
      </tr>
    </table>
    <div class="table-size-title">{{params.rule.key}}</div>
    <table class="table-size">
      <tr v-for="item in params.rule.tables[0]" :key="item.index">
        <td v-for="size in item" :key="size.index">{{size}}</td>
      </tr>
    </table>
    <div v-if="params.rule.disclaimer" class="table-size-info">{{params.rule.disclaimer}}</div>   
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped>
.detail-params {
  padding: 8px;
}

.table-params-title,.table-size-title {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #aaa;
}

.table-params {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;  
}

.table-params thead td {
  width: 50px;
}

.table-params tr {
  height: 35px;
}

.table-params tr td {
  border-bottom: 1px solid #aaa;
}

.table-params tr td:nth-child(1) {
  width: 40px;
}

.table-size-info {
  font-size: 14px;
  border-top: 1px solid #aaa;
}

.table-size {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.table-size tr {
  height: 25px;
}

.table-size td {
  border: 1px solid #aaa;
}
</style>